<template>
  <div id="app">
    <ul>
      <li>
        <div>新密码<em>*</em></div>
        <input type="text" placeholder="请输入新的登录密码">
      </li>
      <li>
        <div>新密码<em>*</em></div>
        <input type="text" placeholder="请输入新的登录密码">
      </li>
      <li>
        <div>密码确认<em>*</em></div>
        <input type="text" placeholder="请确认新的登录密码">
      </li>
      <li>
        <div>手机号码<em>*</em></div>
        <input type="text" placeholder="请输入手机号码">
        <span class="baseColor">获取验证码</span>
      </li>
      <li>
        <div>验证码<em>*</em></div>
        <input type="text" placeholder="请输入验证码">
      </li>
    </ul>
    <a class="btn">完成修改</a>
  </div>
</template>

<script>
  export default {
    name: "update-password",
    beforeCreate() {
      document.querySelector('body').setAttribute('style', 'background-color:#f3f3f3')
    },
    beforeDestroy() {
      document.querySelector('body').removeAttribute('style')
    },
    data(){
      return {
        oldPassword:'',
        newPassword:''
      }
    }
  }
</script>

<style lang="less" scoped>
  #app {
    ul {
      background: #fff;
      border-top: 1px solid #dcdcdc;
      border-bottom: 1px solid #dcdcdc;
      margin-top: 0.5rem;
      li {
        font-size: 0.597rem;
        line-height: 1.877rem;
        margin-left: 0.5rem;
        border-bottom: 1px solid #dcdcdc;
        display: flex;
        padding-right: 0.5rem;
        &:nth-of-type(3){
          input {
            flex: 5;
          }
        }
        &:last-child{
          border: 0;
        }
        div {
          flex: 3;
          em {
            color: #ff4e33;
            margin-left: 0.3rem;
          }
        }
        input {
          font-size: 0.554rem;
          flex: 7;
          border: 0;
          outline: none;
        }
      }
    }
    .btn {
      margin: 1.13rem 0.5rem;
    }
  }
</style>
